<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>文章列表--layui后台管理模板</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" href="../../layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all" />
		<link rel="stylesheet" href="../../css/news.css" media="all" />
	</head>

	<body class="childrenBody">

		<blockquote class="layui-elem-quote news_search">
			<div class="layui-inline">
				<div class="layui-input-inline">
					<input type="text" id="userName" value="" placeholder="请输入关键字" class="layui-input search_input">
				</div>
				<a class="layui-btn search_btn" data-type="search">查询</a>
			</div>
			<div class="layui-inline">
				<a class="layui-btn layui-btn-normal newsAdd_btn" data-type="save">保存</a>
			</div>

			<div class="layui-inline">
				<a class="layui-btn layui-btn-danger batchDel" data-type="delete">删除</a>
			</div>

			<div class="layui-inline">
				<a class="layui-btn audit_btn" data-type="testBtn">如果需要添加按钮可以cp</a>
			</div>
		</blockquote>

		<table class="layui-table" lay-data="{height:'full-80', url:'../../json/user.json', page:true, id:'idTest'}" lay-filter="demo">
			<thead>
				<tr>
					<th lay-data="{checkbox:true}"></th>
					<th lay-data="{field:'id', width:80}">ID</th>
					<th lay-data="{field:'username', width:80}">用户名</th>
					<th lay-data="{field:'sex', width:80, sort: true}">性别</th>
					<th lay-data="{field:'city', width:80}">城市</th>
					<th lay-data="{field:'sign', width:177}">签名</th>
					<th lay-data="{field:'experience', width:80, sort: true}">积分</th>
					<th lay-data="{field:'score', width:80, sort: true}">评分</th>
					<th lay-data="{field:'classify', width:80}">职业</th>
					<th lay-data="{field:'wealth', width:135, sort: true}">财富</th>
					<th lay-data="{fixed: 'right', width:160, align:'center', toolbar: '#barDemo'}"></th>
				</tr>
			</thead>
		</table>

		<form class="layui-form layui-hide" id="testForm">
			<div class="layui-form-item">
				<label class="layui-form-label">文章标题</label>
				<div class="layui-input-block">
					<input type="text" class="layui-input newsName" lay-verify="required" placeholder="请输入文章标题">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">自定义属性</label>
					<div class="layui-input-block">
						<input type="checkbox" name="tuijian" class="tuijian" title="推荐">
						<input type="checkbox" name="shenhe" class="newsStatus" title="审核">
						<input type="checkbox" name="show" class="isShow" title="展示">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">文章作者</label>
					<div class="layui-input-inline">
						<input type="text" class="layui-input newsAuthor" lay-verify="required" placeholder="请输入文章作者">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">发布时间</label>
					<div class="layui-input-inline">
						<input type="text" class="layui-input newsTime" lay-verify="required|date" onclick="layui.laydate({elem:this})">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">浏览权限</label>
					<div class="layui-input-inline">
						<select name="browseLook" class="newsLook" lay-filter="browseLook">
							<option value="0">开放浏览</option>
							<option value="1">会员浏览</option>
						</select>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">关键字</label>
				<div class="layui-input-block">
					<input type="text" class="layui-input" placeholder="请输入文章关键字">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">内容摘要</label>
				<div class="layui-input-block">
					<textarea placeholder="请输入内容摘要" class="layui-textarea"></textarea>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">文章内容</label>
				<div class="layui-input-block">
					<textarea class="layui-textarea layui-hide" name="content" lay-verify="content" id="news_content"></textarea>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit="" lay-filter="addNews">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>

		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="detail">查看</a>
			<a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
		</script>
		<script type="text/javascript" src="../../layui/layui.js"></script>
		<!--<script type="text/javascript" src="newsList.js"></script>-->
		<script>
			layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function() {
				var laydate = layui.laydate, //日期
					laypage = layui.laypage, //分页
					layer = layui.layer, //弹层
					table = layui.table, //表格
					//,carousel = layui.carousel //轮播
					//,upload = layui.upload //上传
					$ = layui.jquery,
					element = layui.element; //元素操作

				//点击触发后面按钮事件 
				$('.layui-btn').on('click', function() {
					var type = $(this).data('type');
					active[type] ? active[type].call(this) : '';
				});

				/*$(window).one("resize", function() {
					$(".newsAdd_btn").click(function() {
						var index = layui.layer.open({
							title: "添加文章",
							type: 2,
							content: "newsAdd.html",
							success: function(layero, index) {
								setTimeout(function() {
									layui.layer.tips('点击此处返回文章列表', '.layui-layer-setwin .layui-layer-close', {
										tips: 3
									});
								}, 500)
							}
						})
						layui.layer.full(index);
					})
				}).resize();*/

				var param = {};
				var active = {
					search: function() {

						//搜索条件可以在这里写
						param.userName = $("#userName").val();

						var ss = $("#userName");

						var keys = Object.keys(param);
						if(keys.length > 0) {
							table.reload('idTest', {
								where: param
								//设定异步数据接口的额外参数
								//,height: 300
							});
						}

					},
					save: function() {
						var checkStatus = table.checkStatus('idTest');
						var data = checkStatus.data;
						if(data.length == 1) {
							$(window).one("resize", function() {
								var index = layui.layer.open({
									title: "添加文章",
									type: 1,
									content: $('#testForm'),
									success: function(layero, index) {
										$('#testForm').removeClass("layui-hide");
										layer.msg(JSON.stringify(data));
										setTimeout(function() {
											layui.layer.tips('点击此处返回文章列表', '.layui-layer-setwin .layui-layer-close', {
												tips: 3
											});
										}, 500)
									}
								})
								layui.layer.full(index);
							}).resize();
						} else if(data.length > 1) {
							layer.msg("保存信息请选择单条");
						} else {
							layer.msg("请选择信息");
						}

					},
					delete: function() {
						var checkStatus = table.checkStatus('idTest'),
							data = checkStatus.data,
							ids = new Array();
						if(data.length > 0) {
							layui.each(data, function(i, o) {
								ids.push(o.id)
							})
							layer.msg(JSON.stringify(ids));
							table.reload('idTest', {
								where: param
							});
						} else {
							layer.msg("请选择");
						}

						//						layer.msg('选中了：' + data.length + ' 个');
					},
					testBtn: function() {
						var checkStatus = table.checkStatus('idTest');
						layer.msg(checkStatus.isAll ? '全选' : '未全选')
					},
					parseTable: function() {
						table.init('parse-table-demo');
					}
				};
				//向世界问个好
				//layer.msg('Hello World');
				table.on('checkbox(demo)', function(obj) {

					console.log(obj.checked); //当前是否选中状态
					console.log(obj); //选中行的相关数据
					console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
				});

				//监听工具条
				table.on('tool(demo)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					var data = obj.data, //获得当前行数据
						layEvent = obj.event; //获得 lay-event 对应的值
					if(layEvent === 'detail') {
						alert(data);
						layer.msg('查看操作');

					} else if(layEvent === 'del') {
						layer.confirm('真的删除行么', function(index) {
							obj.del(); //删除对应行（tr）的DOM结构
							layer.close(index);
							//向服务端发送删除指令
						});
					} else if(layEvent === 'edit') {
						layer.msg('编辑操作');
						table.reload('idTest', {
							//							url: '../../json/user.json',
							where: {
								'id': 1
							} //设定异步数据接口的额外参数
							//,height: 300
						});
					}
				});

				//分页
				laypage.render({
					elem: 'pageDemo', //分页容器的id
					count: 100, //总页数
					skin: '#1E9FFF', //自定义选中色值
					//,skip: true //开启跳页
					jump: function(obj, first) {
						if(!first) {
							layer.msg('第' + obj.curr + '页');
						}
					}
				});

			});
		</script>
	</body>

</html>